<template>
  <div class="GouWu">
    <br>
    <br>
    <hr />
    <div id="d1">
      <div align="center" class="item" v-for="(v, index) in list" :key="index">
        
        <van-card
          :num="v.count"
          price="2.00"
          :desc="v.phone"
          :title="v.name"
          :thumb="v.avaUrl"
        >
        
          <template #footer>
            <van-button size="mini" @click="jian(v)">-</van-button>
            <van-button size="mini" @click="add(v)">+</van-button>
          </template>
        </van-card>
      </div>
      <van-submit-bar :price="getAllcount" button-text="提交订单" class="sub" />
      <p>当前购物车的总数量为：{{ getAllcount }}</p>
     
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  name: "GouWu",
  data() {
    return {};
  },
  methods: {
    jian(v) {
      if (v.count <= 1) {
        MessageBox.confirm("确定执行此操作?")
          .then((action) => {
            this.$store.commit("jian", v);
            Toast("删除成功");
          })
          .catch((e) => {});
      } else {
        this.$store.commit("jian", v);
      }
    },
    add(v) {
      this.$store.commit("add", v);
    },
    change(v) {
      this.$store.commit("change", v);
    },
  },
  computed: {
    list: {
      get() {
        return this.$store.state.list;
      },
      set(v) {
        this.$store.commit("change", v);
      },
    },
    getAllcount() {
      return this.$store.getters.allCount;
    },
  },
};
</script>
<style scoped>
.d1 {
  margin-bottom: 60px;
}
.item img {
  width: 160px;
  height: 150px;
  margin-top: 10px;
  float: left;
}
input {
  width: 50px;
}
p {
  margin-top: 2px;
  margin-bottom: 21px;
}
.btn {
  margin-left: 110px;
}
.sub {
  margin-bottom: 12%;
}
</style>
